<template>
	<el-dialog title="试题详情" :visible.sync="visible" width="640px" append-to-body>
		<el-descriptions :column="2" border class="test_subject_descriptions">
			<el-descriptions-item label="试题类型">{{ subjectTypeName }}</el-descriptions-item>
			<el-descriptions-item label="试题难度">18100000000</el-descriptions-item>
			<el-descriptions-item label="试题标签">{{ subjectData.tags }}</el-descriptions-item>
			<el-descriptions-item label="试题状态">
				<template v-if="subjectData.status === '1'">
					<el-tag size="small" type="success">正常</el-tag>
				</template>
				<template v-if="subjectData.status === '2'">
					<el-tag size="small" type="warning">禁用</el-tag>
				</template>
			</el-descriptions-item>
			<el-descriptions-item label="所属题库" :span="2">{{ subjectData.testQuestionBank?.name }}</el-descriptions-item>
			<el-descriptions-item label="试题题干" :span="2">{{ subjectData.title }}</el-descriptions-item>
			<el-descriptions-item label="试题答案" :span="2">{{ subjectData.testQuestionBank?.name }}</el-descriptions-item>
			<el-descriptions-item label="答案解析" :span="2">{{ subjectData.testQuestionBank?.name }}</el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>

<script>
import { subjectType, subjectDifficulty } from '@/utils/subjectData';
export default {
	data() {
		return {
			visible: false,
			subjectData: {}
		};
	},
	computed: {
		subjectTypeName() {
			let type = this.subjectData.type;
			let info = subjectType.find((n) => n.value === type);
			return !info ? '' : info.label;
		}
	},
	mounted() {
		this.$bus.$on('lookSubject', (data) => {
			this.visible = true;
			console.log(data);
			console.log(data);
			this.subjectData = { ...data.testSubjects };
		});
	},
	destroyed() {
		this.$bus.$off('lookSubject');
	}
};
</script>

<style lang="scss" scoped>
.test_subject_descriptions::v-deep {
	flex: 1;
	overflow: hidden;
	.el-descriptions-item__cell {
		padding: 6px;
		line-height: 24px !important;
	}
	.el-descriptions-item__label {
		width: 100px;
	}
}
</style>
